<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width:400px;
        margin:0 auto;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .box input{
        height:20px;
    }
    .message{
        display:inline-block;
        font-size:12px;
        color:#999;

    }
    .wrong{
        color:red;
    }
    .right{
        color:green;
    }

</style>
<body>
    <div class="box">
        <input type="password" class='ipt' value=''>
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        //密码框的验证信息
        //首先判断的事件是表单失去焦点 onblur
        //如果输入正确，则提示正确信息的字体颜色为绿色
        //如果输入的密码不是6到16为，则提示错误信息，字体的颜色为红色
        //样式繁多，采用className来修改样式

        //获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message')

        //注册事件，失去焦点
        // ipt.onblur = function(){
        //     //根据表单里面的值的长度来判断 ipt.value.length
        //     if(this.value.length < 6 || this.value.length >16){
        //         //根据className来改变错误信息提示样式
        //         message.className = 'message wrong';
        //         message.innerHTML = '您输入的密码不对，请输入6~16位密码'
        //     }else{
        //         message.innerHTML = '您输入的密码格式正确'
        //         message.className = 'message right'
        //     }
        // }


        //操作元素总结：
        //操作元素：分为操作元素内容、操作常见元素属性、操作表单元素属性、操作元素样式属性
        //操作元素内容分为：innerText、innerHTML
        //操作常见元素属性：src、herf、title、alt
        //操作表单元素属性分为：type、value、disabled
        //操作元素样式属性：element.style和className


        //主要实例
        //1、世纪佳缘用户名显示隐藏内容
        //2、京东关闭关闭广告
        //3、新浪下拉菜单
        //4、开关灯案例
        

    </script>
</body>
</html>